<template>
 <div class="page-box">
 	<div class="page-title">
    <div class="returnPage" @click="returnPage">返回</div>
  </div>
  <div class="page-main">
   <!-- 左1行 -->
	 <div class="page-main-box">
    <div class="page-grid">
     <div class="page-grid-title" style="position: relative;">
      <img src="../../../assets/img/realEstate/comHousedeal/title1.png" alt="">
      <div class="tab-card">
        <div :class="tab_index==1?'tab-index':'tab-indexs'" @click="tabIndex(1)">销售面积</div>
        <div :class="tab_index==2?'tab-index':'tab-indexs'" @click="tabIndex(2)">销售金额</div>
      </div>
     </div>
     <div class="page-grid-ec relative">
      <div class="time-pic absolute">
       <div class="time-com "> {{Data01.times[0]}}至{{Data01.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="1" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
       </div>
      </div>
      <div class="grid-chart charH">
        <barLinePublic class="charH"
                v-if="echarData01.xAxisData.length > 0 "
                :housingSupplyStatsData="echarData01"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
   </div>
   <!-- center -->
   <div class="page-main-map" style="position:relative">
    <div class="mapBox">
      <mapBox
          v-if="realEstateMiddleData.regions[0].length > 0"
          :housingSupplyStatsData="realEstateMiddleData"
          @mapNameChange="mapNameChange"
          style="height: 100%; width: 100%"
      ></mapBox>
      <div class="map-address">辽宁省{{ cityObj.cityName == "" ? "" : "-" + cityObj.cityName }}</div>
    </div>
    <div class="footer-box page-grid-ec ">
      <div class="page-main-box">
    <div class="page-grid">
     <div class="page-grid-title" style="position: relative;">
      <img src="../../../assets/img/realEstate/comHousedeal/title7.png" alt="">
     </div>
     <div >
      <div class="time-pic relative">
       <div class="time-com absolute"> {{Data07.times[0]}}至{{Data07.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="77" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
       </div>
      </div>
      <div class="tabForBg">
        <img src="../../../assets/img/realEstate/comHousedeal/tabForBg1.png" alt="">
        <div class="tabForBg-title">外地居民购房统计</div>
        <div class="tabForBg-tab">
          <div @click="footerTab(1)" :class="footer_tab == 1 ?'tabForBg-tab1':'tabForBg-tab2'">面积</div>
          <div @click="footerTab(2)" :class="footer_tab == 2 ?'tabForBg-tab1':'tabForBg-tab2'">套数</div>
        </div>
      </div>
      <div class="grid-chart charHB">
        <barLinePublic class="charHB"
          v-if="echarData07.xAxisData.length > 0"
          :housingSupplyStatsData="echarData07"
          @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
    </div>
    <div class="page-main-box">
    <div class="page-grid">
     <div >
      <div class="time-pic relative">
       <div class="time-com relative"> {{Data08.times[0]}}至{{Data08.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
       </div>
       <div class="start-time">
          <timeYearOrang
          :type="{ type:7,startTimes: Data08.times[0], endTimes:Data08.times[1]}" @timeValueChange="timeValueChanges">
          </timeYearOrang>
       </div>
       <div class="end-time">
          <timeYearOrang
          :type="{ type:8,startTimes: Data08.times[0], endTimes:Data08.times[1]}" @timeValueChange="timeValueChanges">
          </timeYearOrang>
       </div>
      </div>
      <div class="tabForBg">
        <img src="../../../assets/img/realEstate/comHousedeal/tabForBg2.png" alt="">
        <div class="tabForBg-title">常住人口走势</div>
      </div>
      <div class="grid-chart charHB">
        <barLinePublic class="charHB"
          v-if="echarData08.xAxisData.length >0"
          :housingSupplyStatsData="echarData08"
          @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
    </div>
    </div>
   </div>
   <!-- 右1行 -->
	 <div class="page-main-box">
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/comHousedeal/title2.png" alt="">
     </div>
     <div class="page-grid-ec relative">
      <div class="time-pic absolute">
       <div class="time-com"> {{Data02.times[0]}}至{{Data02.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="2" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
       </div>
      </div>
      <div class="grid-chart charH">
        <barLinePublic class="charH"
                v-if="echarData02.xAxisData.length > 0"
                :housingSupplyStatsData="echarData02"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
   </div>
	 <!-- 左2行 -->
	 <div class="page-main-box relative" >
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/comHousedeal/title3.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="time-pic absolute">
       <div class="time-com "> {{Data03.times[0]}}至{{Data03.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="3" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
       </div>
      </div>
      <div class="grid-chart charH">
        <barLinePublic class="charH"
                v-if="echarData03.xAxisData.length > 0"
                :housingSupplyStatsData="echarData03"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
   </div>
	 <!-- 右2行 -->
	 <div class="page-main-box relative" >
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/comHousedeal/title4.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="time-pic absolute">
       <div class="time-com "> {{Data04.times[0]}}至{{Data04.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
       </div>
       <div class="start-time">
          <timeYearOrang1
          :type="{ type:44,startTimes: Data04.times[0], endTimes:Data04.times[1]}" @timeValueChange="timeValueChanges">
          </timeYearOrang1>
       </div>
       <div class="end-time">
          <timeYearOrang1
          :type="{ type:4,startTimes: Data04.times[0], endTimes:Data04.times[1]}" @timeValueChange="timeValueChanges">
          </timeYearOrang1>
       </div>
      </div>
      <div class="grid-chart charH">
        <barStacked class="charH"
          v-if="echarData04.xAxisData.length > 0"
          :housingSupplyStatsData="echarData04"
          @dialogData="dialogData"
        ></barStacked>
      </div>
     </div>
    </div>
   </div>
	 <!-- 左3行 -->
	 <div class="page-main-box relative" >
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/comHousedeal/title5.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="time-pic absolute">
       <div class="time-com "> {{Data05.times[0]}}至{{Data05.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="5" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
       </div>
      </div>
      <div class="grid-chart charH">
        <barLinePublicCopy class="charH"
                v-if="echarData05.xAxisData.length > 0"
                :housingSupplyStatsData="echarData05"
                @dialogData="dialogData"
        ></barLinePublicCopy>
      </div>
     </div>
    </div>
   </div>
   <!-- 右3行 -->
	 <div class="page-main-box relative" >
    <div class="page-grid">
     <div class="page-grid-title">
      <img src="../../../assets/img/realEstate/comHousedeal/title6.png" alt="">
     </div>
     <div class="page-grid-ec">
      <div class="time-pic relative">
       <div class="search" >
        <div  v-if="selectComNameList.length > 0" class="s1" >
          <div class="name-list" >
            <div class="name-tab" v-for="item,index in selectComNameList" :key="index">
              <span>{{ item }}</span><img class="delKfs" @click="delKfs(index)" src="../../../assets/img/realEstate/comHousedeal/del.png" alt="">
            </div>
          </div>
          <!-- <img src="../../../assets/img/realEstate/triangle.png" alt="" > -->
        </div>
        <div v-else>
          <input type="text" v-model="inputValue" @input="handleInput">
          <img src="../../../assets/img/realEstate/triangle.png" alt="">
        </div>
        <div class="search-list" v-if="selectShow">
          <div v-for="item,index in comName" :key="index" @click.stop="getCom(item)">{{ item }}</div>
        </div>
       </div>
       <div class="time-com absolute"> {{Data06.times[0]}}至{{Data06.times[1]}}
        <img src="../../../assets/img/realEstate/triangle.png" alt="">
        <timeSelect :type="6" timeType="1" @timeValueChange="timeValueChanges" ></timeSelect>
       </div>
      </div>
      <div class="grid-chart ">
        <barLinePublic class="charHLast"
                v-if="echarData06.xAxisData.length > 0"
                :housingSupplyStatsData="echarData06"
                @dialogData="dialogData"
        ></barLinePublic>
      </div>
     </div>
    </div>
   </div>
  </div>
  <magnify
  v-if="magnifyEchartData"
  :housingSupplyStatsData="magnifyEchartData"
  @closeDialog="closeDialog"
  ></magnify>
 </div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted,onUnmounted, onBeforeUnmount, computed } from 'vue';
import { barLineParamsData } from "@/utils/chartsPbulic";
import mapBox from "@/components/realEstate/map.vue";
import barLinePublic from "@/components/realEstate/barLinePbulic.vue";
import barLinePublicCopy from "@/components/realEstate/barLinePbuliccopy.vue";
import timeSelect from "@/components/realEstate/timeSelect.vue";
import barStacked from "@/components/realEstate/barStacked.vue";
import timeYearOrang from "@/components/propertyAlertResale/timeYearOrang.vue";
import timeYearOrang1 from "@/components/realEstate/timeYearOrang.vue";
import magnify from "@/components/public/magnify.vue";
import {useRouter} from 'vue-router'
import { getCityName } from '@/utils/cityList'

import {
  selectMarketTrend,
  selectMarketTrendStatistics,
  selectMarketPriceArea,
  selectMarketTrendProportion,
  selectYearMarket,
  selectNewDwellingTrend,
  selectKfsmcList,
  selectOtherPlacesBuy,
  selectPermanentResidentPopulation,
  selectThermodynamic,
} from '@/api/realEstate/comHousedeal/comHousedealOne'


//初始化数据
const fixedCityCode =   localStorage.getItem("cityCode")
const router=useRouter()
const echarData01 = ref({//商品房销售走势
    xAxisData: [],
})
const echarData02 = ref({//商品房销售情况
    xAxisData: [],
})
const echarData03 = ref({//各地商品房销售面积与价格统计
    xAxisData: [],
})
const echarData04 = ref({//商品房各业态销售占比
    xAxisData: [],
})
const echarData05 = ref({//商品房各业态年销售额统计
    xAxisData: [],
})
const echarData06 = ref({//各开发商新建住宅项目趋势
    xAxisData: [],
})
const echarData07 = ref({//购房人来源统计
    xAxisData: [],
})
const echarData08 = ref({//常住人口走势
    xAxisData: [],
})

const Data01 = ref({
  times:''
})
const Data02 = ref({
  times:''
})
const Data03 = ref({
  times:''
})
const Data04 = ref({
  times:[]
})
const Data05 = ref({
  times:''
})
const Data06 = ref({
  times:''
})
const Data07 = ref({
  times:''
})
const Data08 = ref({
  times:[]
})
const realEstateMiddleData = ref({//地图
  regions: [[]],
});
const cityObj = ref({
  cityName: "",
  cityCode: "",
});

const tab_index = ref(1)//图一tab
const footer_tab = ref(1)//面积/套数切换
const comName = ref([])//开发商集合
const selectComNameList = ref([])//选中开发商集合
const inputValue = ref(null) //搜索框值
const selectShow = ref(false)//是否显示下拉框
const magnifyEchartData = ref(null)//放大框
// 方法
//商品房销售走势
const getEcharData01 = async() => {
  let { data } = await selectMarketTrend({ cityCode: cityObj.value.cityCode,startMonth:Data01.value.times[0],endMonth:Data01.value.times[1],marketTrendType:tab_index.value});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon:'',
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "面积(万平方米)",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#24E1E7",
        b: "#086063",
      },
      {
        a: "#E55151",
        b: "#E55151",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData01.value = paramsData
}
//商品房销售情况
const getEcharData02 = async() => {
  let { data } = await selectMarketTrendStatistics({ cityCode: cityObj.value.cityCode,startMonth:Data02.value.times[0],endMonth:Data02.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon:'',
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "面积(万平方米)",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#F0C34B",
        b: "#F0C34B",
      },
      {
        a: "#4A6FE3",
        b: "#4A6FE3",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData02.value = paramsData
}
//各地商品房销售面积与价格统计
const getEcharData03 = async() => {
  let { data } = await selectMarketPriceArea({ cityCode: cityObj.value.cityCode,startMonth:Data03.value.times[0],endMonth:Data03.value.times[1]});
  let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show: true,
    icon:'',
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "面积(万平方米)",
        type: "1",
      },
      {
        name: "金额(亿元)",
        type: "2",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0C44B",
        b: "#E38319",
      },
            {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData03.value = paramsData
}
//商品房各业态销售占比
const getEcharData04 = async() => {
    let { data } = await selectMarketTrendProportion({ cityCode: cityObj.value.cityCode,startMonth:Data04.value.times[0],endMonth:Data04.value.times[1]});
    let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
    let lineBarArr:Array<number> = getLineBarArrData[0]
    let lineBarType:Array<number> = getLineBarArrData[1]
    let seriesType = []
    for(let i = 0; i < lineBarType.length; i++){
      let typeIndex;
      let typeName;
      if(lineBarType[i] == 1){
        typeIndex = 1
        typeName = "bar"
      }else{
        typeIndex = 2
        typeName = "line"
      }
      seriesType.push({
          name: typeName,
          type: typeIndex,
          areaStyleType: "1",
          stack: "1",
      })
    }
    let legendStyle = {
    show: true,
    icon: "rect",
    left: 0,
    top: 1,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "占比",
        type: "1",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "one",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "one",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "one",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "one",
      },
    ],
    data.columnList,
    [
      {
        a: "#54BAEA",
        b: "#094385",
      },
      {
        a: "#EFC24A",
        b: "#E4871C",
      },
      {
        a: "#4F73E7",
        b: "#183FB9",
      },
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData04.value = paramsData
}
//商品房各业态年销售额统计
const getEcharData05 = async() => {
   let { data } = await selectYearMarket({ cityCode: cityObj.value.cityCode,startMonth:Data05.value.times[0],endMonth:Data05.value.times[1]});
    let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
    let lineBarArr:Array<number> = getLineBarArrData[0]
    let lineBarType:Array<number> = getLineBarArrData[1]
    let seriesType = []
    for(let i = 0; i < lineBarType.length; i++){
      let typeIndex;
      let typeName;
      if(lineBarType[i] == 1){
        typeIndex = 1
        typeName = "bar"
      }else{
        typeIndex = 2
        typeName = "line"
      }
      seriesType.push({
          name: typeName,
          type: typeIndex,
          areaStyleType: "1",
          stack: "1",
      })
    }
  let legendStyle = {
    show: true,
    icon:'',
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "32%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "均价(元/平方米)",
        type: "1",
      },
      {
        name: "销售额(亿元)",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    lineBarArr,
    [
      {
        a: "#4F73E7",
        b: "#183FB9",
      },
      {
        a: "#24E0E6",
        b: "#24E0E6",
      },
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
			{
        a: "#E4871D",
        b: "#E4871D",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData05.value = paramsData
}
//各开发商新建住宅项目趋势
const getEcharData06 = async() => {
  let { data } = await selectNewDwellingTrend({ cityCode: cityObj.value.cityCode,startMonth:Data06.value.times[0],endMonth:Data06.value.times[1],dwellingTrendList:selectComNameList.value});
    let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
    let lineBarArr:Array<number> = getLineBarArrData[0]
    let lineBarType:Array<number> = getLineBarArrData[1]
    let seriesType = []
    for(let i = 0; i < lineBarType.length; i++){
      let typeIndex;
      let typeName;
      if(lineBarType[i] == 1){
        typeIndex = 1
        typeName = "bar"
      }else{
        typeIndex = 2
        typeName = "line"
      }
      seriesType.push({
          name: typeName,
          type: typeIndex,
          areaStyleType: "1",
          stack: "1",
      })
  }
  let legendStyle = {
    show: true,
    icon:'',
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "30%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "面积(万平方米)",
        type: "1",
      },
      {
        name: "套数(万套)",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    lineBarArr,
    [
      {
        a: "#24E1E7",
        b: "#086063",
      },
      {
        a: "#E4871D",
        b: "#E4871D",
      },
      {
        a: "#594BF0",
        b: "#261299",
      },
						{
        a: "#F3CE6E",
        b: "#F3CE6E",
      },
      {
        a: "#24E1E7",
        b: "#086063",
      },
      {
        a: "#E4871D",
        b: "#E4871D",
      },
      {
        a: "#594BF0",
        b: "#261299",
      },
						{
        a: "#F3CE6E",
        b: "#F3CE6E",
      },
    ],
    legendStyle,
    gridConfig
  );
  echarData06.value = paramsData
}
//购房人来源统计
const getEcharData07 = async() => {
  let { data } = await selectOtherPlacesBuy({ cityCode: cityObj.value.cityCode,startMonth:Data07.value.times[0],endMonth:Data07.value.times[1],otherPlacesBuyType:footer_tab.value});
    let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
    let lineBarArr:Array<number> = getLineBarArrData[0]
    let lineBarType:Array<number> = getLineBarArrData[1]
    let seriesType = []
    for(let i = 0; i < lineBarType.length; i++){
      let typeIndex;
      let typeName;
      if(lineBarType[i] == 1){
        typeIndex = 1
        typeName = "bar"
      }else{
        typeIndex = 2
        typeName = "line"
      }
      seriesType.push({
          name: typeName,
          type: typeIndex,
          areaStyleType: "1",
          stack: "1",
      })
  }
  let legendStyle = {
    show: false,
    icon:'',
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "22%",
  };
  if(footer_tab.value == 1){
      let paramsData = barLineParamsData(
      ['住宅销售额','住宅销售均价','商业营业住房销售额','商业营业用房销售均价'],
      data.abscissaList,
      [
        {
          name: "面积(万平方米)",
          type: "1",
        },
      ],
      seriesType,
      lineBarArr,
      [
        {
          a: "#594BF0",
          b: "#261299",
        },

      ],
      legendStyle,
      gridConfig
    );
    echarData07.value = paramsData
  }else{
    let paramsData = barLineParamsData(
      ['住宅销售额','住宅销售均价','商业营业住房销售额','商业营业用房销售均价'],
      data.abscissaList,
      [
        {
          name: "金额(万元)",
          type: "1",
        },
      ],
      seriesType,
      lineBarArr,
      [
        {
          a: "#594BF0",
          b: "#261299",
        },

      ],
      legendStyle,
      gridConfig
    );
    echarData07.value = paramsData
  }
}
//常驻人口走势
const getEcharData08 = async() => {
  let { data } = await selectPermanentResidentPopulation({ cityCode: cityObj.value.cityCode,startMonth:Data08.value.times[0],endMonth:Data08.value.times[1]});
    let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
    let lineBarArr:Array<number> = getLineBarArrData[0]
    let lineBarType:Array<number> = getLineBarArrData[1]
    let seriesType = []
    for(let i = 0; i < lineBarType.length; i++){
      let typeIndex;
      let typeName;
      if(lineBarType[i] == 1){
        typeIndex = 1
        typeName = "bar"
      }else{
        typeIndex = 1
        typeName = "line"
      }
      seriesType.push({
          name: typeName,
          type: typeIndex,
          areaStyleType: "1",
          stack: "1",
      })
  }
  let legendStyle = {
    show: true,
    icon:'',
    left: 200,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "5%",
    right: "5%",
    bottom: "3%",
    top: "22%",
  };
  let paramsData = barLineParamsData(
      data.nameList,
      data.abscissaList,
      [
        {
          name: "面积(万平方米)",
          type: "1",
        },
      ],
      seriesType,
      lineBarArr,
      [
        {
          a: "#55BBEB",
          b: "#074083",
        },
        {
          a: "#E55151",
          b: "#E55151",
        },
      ],
      legendStyle,
      gridConfig
    );
    echarData08.value = paramsData
}
// 图一切换卡片
const tabIndex = (i) => {
	tab_index.value = i;
  getEcharData01()
}
// 底部echart面积/套数切换
const footerTab = (i) => {
  footer_tab.value = i;
  getEcharData07()
}
// 获取时间组件时间
const timeValueChanges = (va) => {
 if(va.type == 1){
  Data01.value.times = va.times
  getEcharData01()
 }else if(va.type == 2){
  Data02.value.times = va.times
  getEcharData02()
 }else if(va.type == 3){
  Data03.value.times = va.times
  getEcharData03()
 }else if(va.type == 4){
  Data04.value.times[1] = va.times
  getEcharData04()
 }else if(va.type == 5){
  Data05.value.times = va.times
  getEcharData05()
 }else if(va.type == 6){
  Data06.value.times = va.times
  getEcharData06()
 }else if(va.type == 7){
  Data08.value.times[0] = va.times
  getEcharData08()
 }else if(va.type == 8){
  Data08.value.times[1] = va.times
  getEcharData08()
 }else if(va.type == 77){
  Data07.value.times = va.times
  getEcharData07()
 }else if(va.type == 44){
  Data04.value.times[0] = va.times
  getEcharData04()
 }
}
// 地图
const realEstateMiddle = async() => {
  let { data } = await selectThermodynamic({ adcode: cityObj.value.cityCode });
  let inventoryRegionDTOS = data.map((item: any) => ({
    name: item.cityName,
    value: [item.houseCount,item.peopleCount],
    code: item.cityCode,
    selected: fixedCityCode == item.cityCode ? true:false,
  }));
  let seriesData = [ inventoryRegionDTOS];
  let paramsData = {
    regions: seriesData,
  };
  realEstateMiddleData.value = paramsData
}
// 获取城市名
const mapNameChange = (e) => {
  if (cityObj.value.cityName == e.cityName) {
    cityObj.value = {
      cityName: "",
      cityCode: "",
    };
    allFun();
  } else {
    cityObj.value = e;
    allFun();
  }
}
//合并柱状折线图数据
const getLineBarArr = (policy: Array<number>,resul: Array<number>): Array<any>=>{
  let type = []
  for(let i = 0 ; i< policy.length;i++){
  type.push(1)
  }
  for(let i = 0 ; i < resul.length;i++){
    type.push(2);
    policy.push(resul[i]);
  }
  return[policy,type]

} 
// 初始化时间
const defaultTime = () => {
  let t = new Date()
  let tYear = t.getFullYear()
  let tYear1 = t.getFullYear()-1
  let tMonth1 = t.getMonth()
  let tMonth2 = t.getMonth()+1
  let tArr = []
  if(tMonth1 < 10){
    tMonth1 = '0' + tMonth1
  }
  if(tMonth2 < 10){
    tMonth2 = '0' + tMonth2
  }
  Data01.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data02.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data03.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data04.value.times = [`${tYear1}`,`${tYear}`]
  Data05.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data06.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data07.value.times = [`${tYear}-${tMonth1}`,`${tYear}-${tMonth2}`]
  Data08.value.times = [`${tYear1}`,`${tYear}`]
}
//获取搜索框输入值
const handleInput = async(val) => {
  let { data } = await selectKfsmcList({ kfsmc:val.target.value});
  comName.value = data
  if(comName.value.length > 0) {
    selectShow.value = true
  }
}
// 选择开发商
const getCom = (n) => {
if(selectComNameList.value.length < 3){
    selectComNameList.value.push(n)
    getEcharData06()
  }
}
// 删除开发商
const delKfs = (val) => {
  delete selectComNameList.value[val]
  selectComNameList.value = selectComNameList.value.filter(Boolean)
  getEcharData06()
  if(selectComNameList.value.length == 0){
    selectShow.value = false
    inputValue.value = null
    getEcharData06()
  } 
}
// 监听全局点击事件
document.addEventListener('click', (event) => {
  selectShow.value = false
});
// 打开弹框
const dialogData = (val) => {
  magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val) => {
  magnifyEchartData.value = null
}
// 返回
const returnPage = (val) => {
  router.go(-1);
}
const allFun = () => {
  defaultTime()
  getEcharData01()
  getEcharData02()
	getEcharData03()
	getEcharData04()
	getEcharData05()
  getEcharData06()
  getEcharData07()
  getEcharData08()
	realEstateMiddle()
}
allFun();
onMounted(() => {
  cityObj.value = getCityName(fixedCityCode)
});
onUnmounted(() => {
})
</script>
<style lang="less" scoped>
.page-box{
 width: 100vw;
 height: 100vh;
 background-image: url('../../../assets/img/realEstate/pageBg.png');
 background-size: 100% 100%;
 background-repeat: no-repeat;
 overflow: hidden;
 .page-title{
  width: 100vw;
  height: 85px;
  margin-bottom: 26px;
  background-image: url('../../../assets/img/realEstate/comHousedeal/headBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
 }
 .page-main{
  width: 100vw;
  height: calc(100vh - 111px);
  display: grid;
  grid-template-columns: repeat(3, 600px);
  grid-template-rows: repeat(3, 300px);
  grid-gap: 20px 10px;
  place-content: start center;
  box-sizing: border-box;
	.page-main-box{
    .page-grid{
    width: 100%;
    .page-grid-title{
     height: 34px;
     width: 100%;
     margin-bottom: 3px;
     img{
      width: 100%;
      height: 100%;
     }
    }
    .page-grid-ec{
     background: rgba(27,126,242,0.1);
     border-radius: 0px 0px 0px 0px;
     border: 1px solid rgba(27,126,242,0.4);
     .time-pic{
      height: 31px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
			 right: 0px;
      .time-com{
       padding-left: 15px;
       height: 20px;
       background: rgba(27,126,242,0.2);
       border-radius: 0px 0px 0px 0px;
       border: 1px solid rgba(41,240,250,0.6);
       font-weight: 400;
       font-size: 12px;
       color: #FFFFFF;
       letter-spacing: 1px;
       text-align: right;
        img{
          width: 9px;
          height: 6px;
          position: relative;
          bottom: 2px;
          margin-right: 4px;
        }
      }
      .time-com:hover{
        cursor: pointer;
      }
     }
    }
   }
  }
		.page-main-map{
      grid-column: 2 / 2;
      grid-row: 1 / 4;
    .mapBox{
      height:440px;
    }
  }
		.tab-card{
			position: absolute;
			z-index: 1;
			color: #FFFFFF;
			display: flex;
			right: 40px;
			top: 0px;
			font-size: 16px;
			width: 190px;
			justify-content: space-between;
			.tab-index{
					width: 90px;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
					background-image: url('../../../assets/img/realEstate/comHousedeal/tabBg.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
			}
			.tab-index:hover{
				cursor: pointer;
			}
			.tab-indexs{
					width: 90px;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
			}
			.tab-indexs:hover{
				cursor: pointer;
			}
		}
	}
}
.map-address {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #60f9f4;
  letter-spacing: 1.2px;
  margin-left: 27px;
}

.map-address::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -27px;
  width: 20px;
  height: 20px;
  background: url("@/assets/img/personInfor/map-address.png");
  background-size: 100% 100%;
}
.footer-box{
  margin-top: 20px;
}
.tabForBg{
  width: 100%;
  height: 31px;
  position: relative;
  align-items: center;
  display: flex;
  justify-content: space-between;
  img{
    width: 98%;
    height: 16px;
    position: absolute;
    bottom:6px;
    left: 5px;
    z-index: 2;
  }
  .tabForBg-title{
    font-weight: 400;
    font-size: 16px;
    color: #29F1FA;
    margin-left: 30px;
  }
  .tabForBg-tab{
    display: flex;
    font-weight: 400;
    font-size: 16px;
    position: absolute;
    right: 30px;
    z-index: 3;
    div:first-child{
      margin-right: 5px;
    }
    div:last-child{
      margin-left: 5px;
    }
    div:hover{
      cursor: pointer;
    }
    .tabForBg-tab1{
      color: #29F1FA;
    }
    .tabForBg-tab2{
      color: #959699;
    }
  }
  .tabForBg-tab:hover{
    cursor: pointer;
  }
  
}
.page-grid-ec{
     background: rgba(27,126,242,0.1);
     border-radius: 0px 0px 0px 0px;
     border: 1px solid rgba(27,126,242,0.4);
     .time-pic{
      height: 31px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
			 right: 0px;
      .time-com{
       padding-left: 15px;
       height: 20px;
       background: rgba(27,126,242,0.2);
       border-radius: 0px 0px 0px 0px;
       border: 1px solid rgba(41,240,250,0.6);
       font-weight: 400;
       font-size: 12px;
       color: #FFFFFF;
       letter-spacing: 1px;
       text-align: right;
        img{
          width: 9px;
          height: 6px;
          position: relative;
          bottom: 2px;
          margin-right: 4px;
        }
      }
      .time-com:hover{
        cursor: pointer;
      }
     }
}
.search{
  position: absolute;
  left: 7px;
  top: 5px;
  .s1{
    display: flex;
    img{
      // width: 10px;
      // height: 6px;
      // top: 8px;
    }
  }
  .name-list{
    width: 200px;
    height: 17px;
    background: rgba(27,126,242,0.2);
    border: 1px solid rgba(41,240,250,0.4);
    padding: 2px 0px;
    padding-left: 5px;
    padding-right: 20px;
    font-size: 10px;
    color: #fff;
    display: flex;
    .name-tab{
      display: flex;
      align-items: center;
      margin-left: 5px;
      background: #031A3F;
      border-radius: 3px 3px 3px 3px; 
      padding: 2px 10px;
      padding-right: 15px;
      box-sizing: border-box;
      position: relative;
      span{
        width: 35px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      img{
        width: 10px;
        height: 10px;
        position: absolute;
        right: 3px;
        top: 4px;
      }
    }
  }
  input{
    width: 200px;
    height: 17px;
    background: rgba(27,126,242,0.2);
    border: 1px solid rgba(41,240,250,0.4);
    padding: 2px 0px;
    padding-left: 5px;
    padding-right: 20px;
    font-size: 12px;
    color: #fff;
  }
  img{
    width: 10px;
    height: 6px;
    position: absolute;
    right: 10px;
    bottom: 9px;
  }
  .search-list{
    width: 227px;
    box-sizing: border-box;
    background: #07316A;
    border-left: 1px solid rgba(41,240,250,0.4);
    border-right: 1px solid rgba(41,240,250,0.4);
    border-bottom: 1px solid rgba(41,240,250,0.4);
    color: #FFFFFF;
    position: absolute;
    z-index: 5;
    font-size: 12px;
    div{
      padding:2px 5px;
    }
    div:hover{
      cursor: pointer;
      background:rgba(41,240,250,1);
    }
  }
}
.delKfs:hover{
  cursor: pointer;
}
.charH{
    height: 264px;
}
.charHB{
  height: 160px;
}
.charHLast{
  height: 232px;
}
/deep/ .el-range-editor.el-input__wrapper{
  width: 130px ;
  height: 25px;
  position: absolute;
  top: 0px;
  right:0px;
	z-index: 1;
}
/deep/ .el-date-editor.el-input{
  width: 130px ;
  height: 25px;
  position: absolute;
  top: 0px;
  right:0px;
	z-index: 1;
}
/deep/ .start-time{
  .el-date-editor.el-input{
      width: 65px ;
      height: 25px;
      position: absolute;
      top: 0px;
      right:60px;
      z-index: 1;
  }
}
/deep/ .end-time{
  .el-date-editor.el-input{
      width: 65px ;
      height: 25px;
      position: absolute;
      top: 0px;
      right:0px;
      z-index: 1;
  }
}
</style>